<template>
    <div style="position: relative;height:calc(100vh - 220px)">
      <!--地图模块-->
      <Index v-if="showBool" :dataType="dataType" :allDataList="allDataList" @handleDetail="handleDetail"></Index>
        <!-- 搜索 -->
        <div class="searchIpt">
                <div class="ipt">
                    <el-input v-model="queryParams.engineeringName" placeholder="请输入典型工程名称" style="width: 250px;" ></el-input>
                    <span class="searchStyle" @click="handleQueryByName">搜索</span>
                </div>
                <div v-if="openSearch" class="openSearchIpt">
                    <!--<el-radio-group v-model="queryParams.type">
                      <el-radio :label="1">圈选</el-radio>
                      <el-radio :label="2">框选</el-radio>
                      <el-radio :label="3">多边形</el-radio>
                      <el-radio :label="4">行政区划</el-radio>
                    </el-radio-group>
                    <el-divider border-style="dashed" />-->
                    <el-row>
                        <el-col>
                            <el-select v-model="queryParams.province" placeholder="所在省" @change="chooseProvince" clearable value-key="id"
                                style="width:200px;">
                                <el-option key="全国级" label="全国级" value="全国级"></el-option>
                                <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col style="margin:10px 0px;">
                            <el-select v-model="queryParams.city" placeholder="所在市" @change="chooseCity"
                                style="width:200px;;" value-key="id" clearable :disabled="queryParams.province=='全国级'">
                                <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col>
                            <el-select v-model="queryParams.county" placeholder="所在区/县" @change="chooseCounty" style="width:200px;"
                                value-key="id" clearable :disabled="queryParams.province=='全国级'">
                                <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <p class="titleSearch">场所级别</p>
                    <el-radio-group v-model="queryParams.engineeringType">
<!--                      <el-radio label="2">全部</el-radio>-->
                      <el-radio label="">全部</el-radio>
                      <el-radio label="1">新建工程</el-radio>
                      <el-radio label="0">加固工程</el-radio>
                    </el-radio-group>
                    <p class="titleSearch">工程类别</p>
                    <el-checkbox v-model="queryParams.engineeringCategory1" :label="true" size="large" @change="changeChexkBox">全部</el-checkbox>
                    <!-- <el-radio v-model="queryParams.engineeringCategory1" :label="true" @click="handleRadio">全部</el-radio> -->
                    <el-checkbox-group v-model="queryParams.engineeringCategory">
                      <el-checkbox v-for="item in optionBox" :label="item" />
                    </el-checkbox-group>
                    <p style="padding: 0;text-align: center;">
                        <el-button type="primary" @click="handleQuery">搜索</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                    </p>
                </div>
            <div class="bottomIpt">
                <p class="closeSearch" @click="handleOpenSearch">{{openSearch?"搜索条件收起":'搜索条件展开'}}</p>
            </div>
        </div>

        <!-- 搜索结果 -->
        <div class="resultTable">
            <div class="searchResult" @click="handleResult">
                搜索结果
                <el-icon v-if="openResult"><DArrowRight /></el-icon>
                <el-icon v-if="!openResult"><DArrowLeft /></el-icon>
            </div>
            <div class="rightResult" v-if="openResult">
                <p class="titleResult">数据信息已查( {{dataList.length}} )条</p>
                <el-table :data="dataList" height="400" stripe style="width:600px;z-index: 888;" v-loading="loading">
                    <el-table-column label="序号" width="60px" align="center">
                        <template #default="scope">
                            <span>{{ (queryParams.page - 1) * queryParams.rows + scope.$index + 1 }}</span>
                        </template>                  
                    </el-table-column>
                    <el-table-column property="engineeringName" label="名称"></el-table-column>
                    <el-table-column property="engineeringRange" label="范围"></el-table-column>
                    <el-table-column property="iaNumber" label="工程类型">
                        <template #default="scope">
                            <span v-if="scope.row.engineeringType=='0'">加固工程</span>
                            <span v-if="scope.row.engineeringType=='1'">新建工程</span>
<!--                            <span v-if="scope.row.engineeringType=='2'">全部</span>-->
                          <span v-if="scope.row.engineeringType==''">全部</span>
                        </template>                      
                    </el-table-column>
                    <el-table-column property="engineeringCategory" label="工程类别" show-overflow-tooltip ></el-table-column>
                    <el-table-column label="操作" align="center"  width="90" class-name="small-padding fixed-width">
                      <template #default="scope">
                        <el-button type="text" @click="handleDetail(scope.row.id)">详情</el-button>
                      </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
                @pagination="getList" />
            </div>
        </div>
        <!-- 详情 -->
        <div class="detailSearch" v-if='openDetail'>
            <el-icon :size="20" style="position: absolute;right: 10px;top: 10px;cursor: pointer;" @click="openDetail=false"><CloseBold /></el-icon>
            <p style="font-weight: bold;font-size: 18px;text-align: center;">{{ form.engineeringName }}</p>
            <p>{{ form.province }}{{ form.city }}{{ form.county }}</p>
            <el-carousel trigger="click" width="400px" style="margin: 0 auto;" @change="changePic" ref="carouselRef">
                <el-carousel-item><img :src="form.beforeConstructionPhoto.includes(',')?form.beforeConstructionPhoto.split(',')[0]: form.beforeConstructionPhoto" alt="" class="img"></el-carousel-item>
                <el-carousel-item><img :src="form.processConstructionPhoto.includes(',')?form.processConstructionPhoto.split(',')[0]: form.processConstructionPhoto" alt="" class="img"></el-carousel-item>
                <el-carousel-item><img :src="form.completionAcceptancePhoto.includes(',')?form.completionAcceptancePhoto.split(',')[0]: form.completionAcceptancePhoto" alt="" class="img"></el-carousel-item>
            </el-carousel>
            <p style="text-align: center;">{{picTitle}}</p>
            <p>工程类型：{{ form.engineeringType }}</p>
            <p>工程类别：{{ form.engineeringCategory }}</p>
            <el-tabs v-model="activeName" type="card" class="demo-tabs">
              <el-tab-pane label="工程简介" name="first">{{ form.engineeringProfile }}</el-tab-pane>
              <el-tab-pane label="工程亮点" name="secent">{{ form.engineeringhHighLights }}</el-tab-pane>
              <el-tab-pane label="工程效果" name="third">{{ form.engineeringEffect }}</el-tab-pane>
              <el-tab-pane label="评审意见" name="fourd">{{ form.engineeringOpinion }}</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup name="seismicReinforcement">
//地图
import Index from '@/map/thematicMap/probeClass/seismicReinforcement/index.vue';
import { reactive, toRefs, watch } from 'vue';
import {getAllList,detail,getDataByIds} from "@/api/thematicMap/probeClass/seismicReinforcement";
import { getProvince, getChildArea } from "@/api/system/division";
const { proxy } = getCurrentInstance();
const openSearch = ref(false);
const openResult = ref(false);
const openDetail = ref(false);
const picTitle = ref('')
const activeName = ref('first')
const optionBox = ref(['大中小学校','城镇住宅','医院','危险化学品厂','电信网络','其他','电力网络','农村民居','重要交通生命线','应急避难场所','水库大坝'])
const data = reactive({
    dataList:[],
    total:0,
    loading:false,
    queryParams:{
        page:1,
        rows:10,
        engineeringName:'',
        type:4,
        province:'',
        city:'',
        county:'',
        // engineeringType:'2',
        engineeringType:'',//全部
        engineeringCategory1:true,
        engineeringCategory:optionBox.value,
    },
    provinceData:[],
    cityData:[],
    areaData:[],
    form:{}
})

const {dataList,total,loading,queryParams,provinceData,cityData,areaData,form,} = toRefs(data)

//类型
const dataType = ref("");
const showBool = ref(false);

watch(() => queryParams.value.engineeringCategory, (val) => {
    if(val.length==11){
        queryParams.value.engineeringCategory1 = true;
    }else{
        queryParams.value.engineeringCategory1 = false
    }
}, { deep: true, immediate: true})

const changeChexkBox = (val)=>{
    if(val){
        queryParams.value.engineeringCategory= optionBox.value
    }else{
        queryParams.value.engineeringCategory = []
    }
}

const handleOpenSearch=()=>{
    proxy.resetForm("queryForm");
    openSearch.value = !openSearch.value;
}
//根据名称搜索
const handleQueryByName = ()=>{
  //搜索条件收起
  proxy.resetForm("queryForm");
  openSearch.value = false;
  loading.value = true;
  let name = queryParams.value.engineeringName;
  queryParams.value={
    page:1,
    rows:10,
    engineeringName:name,
    type:4,
    province:'',
    city:'',
    county:'',
    engineeringType:'',//全部
    // engineeringCategory:[],
    engineeringCategory1:true,
    engineeringCategory:optionBox.value,
  };
  let tempParams = {...queryParams.value,engineeringCategory:queryParams.value.engineeringCategory.join(',')};
  if(tempParams.province=="全国级") {
    tempParams.province = "";
    tempParams.engineeringRange = "全国级";
  }else{
    tempParams.engineeringRange = "";
  }
  getAllList(tempParams).then(res=>{
    console.log(res.data);
    dataList.value = res.data.rows?res.data.rows:[];
    total.value = res.data.total;
    loading.value = false;
    if(res.data.total>0){
      //获取ids
      let ids = "";
      for(let i=0;i<res.data.rows.length;i++){
        if(i>0){
          ids += ",";
        }
        ids += res.data.rows[i].id;
      }
      //获取案例集下的数据
      getAllDataByIds(ids);
      proxy.$modal.msgSuccess("搜索结果为"+res.data.total+"条");
      openResult.value = true;
    }else{
      allDataList.value = [];
      proxy.$modal.msgWarning('搜索结果为0条');
      openResult.value = true;
    }
  }).catch(err=>{loading.value=false})
}
const handleQuery = ()=>{
    queryParams.value.page=1;
    getList();
}
const handleResult =()=>{
    openResult.value = !openResult.value;
}
const resetQuery = ()=>{
    queryParams.value={
        page:1,
        rows:10,
        engineeringName:'',
        type:4,
        province:'',
        city:'',
        county:'',
        // engineeringType:'2',
        engineeringType:'',//全部
        // engineeringCategory:[],
        engineeringCategory1:true,
        engineeringCategory:optionBox.value,
    };
    getList();
}
const handleDetail =(id)=>{
    detail(id).then(res=>{
        openSearch.value = false;
        openDetail.value = true;
        form.value = res.data;
        if(res.data.engineeringType=='0'){
            form.value.engineeringType = '加固工程'
        }else if(res.data.engineeringType=='1'){
            form.value.engineeringType = '新建工程'
        // }else if(res.data.engineeringType=='2'){
        }else if(res.data.engineeringType==''){
            form.value.engineeringType = '全部'
        }
        picTitle.value = '施工前照片';
        proxy.$refs['carouselRef'].setActiveItem(0);
    })
}
const changePic=(val)=>{
    console.log(val);
    if(val==0){
        picTitle.value = '施工前照片';
    }else if(val==1){
        picTitle.value = '施工过程照片';
    }else if(val==2){
        picTitle.value = '竣工验收照片';
    }
}
/** 获取省列表 */
function getProvinceData() {
    getProvince().then((response) => {
        provinceData.value = response.data;
    });
}
function chooseProvince(value) {
    console.log(value);
    queryParams.value.city = null;
    queryParams.value.county = null;
    queryParams.value.province = value=='全国级'?value:value.name;
    cityData.value = [];
    areaData.value = [];
    if(value=='全国级'){
        return;
    }
    getChildArea(value.id).then(response => {
        cityData.value = response.data;
    });
}
function chooseCity(value) {
    queryParams.value.city = value.name;
    queryParams.value.county = null;
    areaData.value = [];
    getChildArea(value.id).then((response) => {
        areaData.value = response.data;
    });
}
function chooseCounty(value) {
    queryParams.value.county = value.name;
}
// 获取查询
const getList =()=>{
    loading.value = true;
    let categoryStr = "无";
    let categoryArray = queryParams.value.engineeringCategory;
    if(categoryArray && categoryArray.length>0){
      categoryStr = categoryArray.join(",");
    }
    console.log("queryParams.value.engineeringCategory");
    console.log(queryParams.value.engineeringCategory);
    console.log(categoryStr);
    let tempParams = {...queryParams.value,engineeringCategory:categoryStr};
    if(tempParams.province=="全国级") {
      tempParams.province = "";
      tempParams.engineeringRange = "全国级";
    }else{
      tempParams.engineeringRange = "";
    }
    getAllList(tempParams).then(res=>{
        console.log(res.data);
        dataList.value = res.data.rows?res.data.rows:[];
        total.value = res.data.total;
        loading.value = false;
        if(res.data.total>0){
          //获取ids
          let ids = "";
          for(let i=0;i<res.data.rows.length;i++){
            if(i>0){
              ids += ",";
            }
            ids += res.data.rows[i].id;
          }
          //获取案例集下的数据
          getAllDataByIds(ids);
          proxy.$modal.msgSuccess("搜索结果为"+res.data.total+"条");
          openResult.value = true;
        }else{
          allDataList.value = [];
          proxy.$modal.msgWarning('搜索结果为0条');
          openResult.value = true;
        }
    }).catch(err=>{loading.value=false})
}
//查询经纬度数据列表
const allDataList = ref([]);
//获取案例集下的数据
function getAllDataByIds(ids){
  if(ids!=""){
    getDataByIds(ids).then(res=>{
      console.log(res.data);
      allDataList.value = res.data?res.data:[];
    });
  }else{
    allDataList.value = [];
  }
}

onMounted(() => {
  getProvinceData();
  getList();
  showBool.value = true;
})
</script>

<style scoped lang="scss">
:deep(.el-radio__label) {
  color:#FFFFFF;
}
:deep(.el-checkbox__label) {
  color:#FFFFFF;
}
//:deep(.el-tabs__item) {
//  color:#FFFFFF;
//}

// 搜索弹框样式
.searchIpt{
  position:absolute;
  width: 380px;
    //width: 340px;
    border-radius: 8px;
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.5);
    .ipt{
        border-radius: 8px;
        padding: 10px 20px;
        background-color: rgba(0, 0, 0, 0.44);
        .searchStyle{
            margin-left: 18px;
            display: inline-block;
            cursor: pointer;
            color: #fff;
            font-weight: bold;
        }
    }
    .openSearchIpt{
        :deep(.el-divider--horizontal){
            margin: 10px 0px 20px!important;
        }
        .titleSearch{
            margin-bottom: 0px;
            color: #fff;
            font-size: 16px;
            font-weight: 400;
        }
        padding: 0px 20px;
        padding-top: 20px;
    }
    .bottomIpt{
        padding: 0px 20px;
        background-color: rgba(0, 0, 0, 0.44);
        border-radius: 8px;
        .closeSearch{
            padding: 0;
            margin: 10px auto;
            color: yellow;
            text-align: center;
          cursor:pointer;
        }
    }
}
.resultTable{
    position: absolute;
    right: 0px;
    top: 0px;
    display: flex;
    flex-direction: row;
    .searchResult{
    width: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0px;
    left: -40px;
    font-size: 16px;
    font-weight: bold;
    color: yellow;
    padding: 10px;
    border-radius: 2px;
      cursor:pointer;
}
.rightResult{
    padding:0px 20px 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    .titleResult{
        color: yellow;
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        margin: 14px auto;
    }
}
}

.detailSearch{
    margin: 0 auto;
    width: 60%;
    max-height: calc(100vh - 340px);
    overflow-y: auto;
    position: absolute;
    left: 0px;
    bottom: 20px;
    padding: 15px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    p{font-weight: 500;}
    z-index: 999999;
    :deep(.el-tabs__header){
        .el-tabs__item{
            color: #fff;
        }
        .el-tabs__item.is-active {
            color: #409eff;
        }
        .el-tabs__item:hover {
            color: #409eff;
        }
    }
    .img{
        width:100%;
        height: 100%;
        background-size: 100%;
    }
    .review-file-list{
        list-style: none;
        width: calc(100% - 140px);
        display: inline-block;
        padding: 0;
        vertical-align: text-top;
        margin: 0;
      }
      .review-file-list .review-file-list__item {
        border: 1px solid #e4e7ed;
        line-height: 2;
        margin-bottom: 10px;
        position: relative;
      }
}

</style>